<template>
  <div ref="wssContainer" class="wss-container">
    <!-- <div class="title-label">图片管理</div> -->

    <div class="box-container">
      <NewCard :isScroll="true" :title="getTitle" class="left">
        <el-aside style="padding: 0rem" width="9rem">
          <el-menu
            default-active="0"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
          >
            <el-menu-item
              @click="activeLabel(item)"
              v-for="(item, index) in contractList"
              :index="index + ''"
              :key="item.id"
            >
              <!-- <i class="el-icon-document"></i> -->
              <span slot="title" style="padding: 0px" class="length-box"
                >{{ item.name }} <span class="lengthNum"></span
              ></span>
            </el-menu-item> </el-menu
        ></el-aside>
      </NewCard>
      <NewCard class="content-box" title="合同内容">
        <main class="content">
          <header class="head">
            <div class="titile">头部</div>
            <div
              @click="selectItem($event, 'head')"
              class="head-item"
              v-for="(h, index) in contract.head"
              :key="index"
            >
              {{ h }}
            </div>
          </header>
          <div class="details">
            <div class="titile">详细</div>
            <div
              class="details-item"
              v-for="(d, index) in contract.info"
              :key="index"
            >
              <div class="details-item-title">
                {{ d.title }}
              </div>
              <div class="details-item-content">
                {{ d.content }}
              </div>
            </div>
          </div>
          <footer class="footer">
            <div class="titile">尾部</div>
            <div
              class="footer-item"
              v-for="(f, index) in contract.foot"
              :key="index"
            >
              {{ f }}
            </div>
          </footer>
        </main>
      </NewCard>
    </div>
    <div v-if="isShowEditTipBox" :style="editTip" class="editTip-box">
      <span class="editTip-item">编辑</span>
      <span class="editTip-item">删除</span>
    </div>
  </div>
</template>


<script>
import NewCard from "@/wss/components/newCard.vue";

import {
  getScontractContractListApi,
  getScontractGetInfoApi,
} from "@/wss/newApi_3-24/doc/scontract.js";
export default {
  components: {
    NewCard,
  },
  created() {
    this.getScontractContractListFn();
  },
  data() {
    return {
      isShowEditTipBox: false,
      // 提示框位置
      editTip: {
        left: "",
        top: "",
      },
      currentEdit: "",
      // 合同列表
      contractList: [],
      // 合同内容
      contract: {},
    };
  },
  mounted() {
    let s = new Set(["head-item", "head", "editTip-item"]);
    this.$refs.wssContainer.onclick = (e) => {
      let { target } = e;
      console.log(target.className);
      if (!s.has(target.className)) {
        this.isShowEditTipBox = false;
      }
    };
  },
  computed: {
    // 返回类型
    getTitle() {
      let haveTitle = this.contractList.find(
        (item) => item.contractType.length != 0
      )?.contractType;
      // 没有找到直接退出
      if (!haveTitle) return;
      return haveTitle[0].content;
    },
  },
  methods: {
    // 点击选择某一项
    selectItem(e, ident) {
      let { pageX, pageY } = e;
      this.editTip.left = pageX + "px";
      this.editTip.top = pageY + "px";
      this.isShowEditTipBox = true;
      this.currentEdit = ident;
    },
    // 根据合同类型查询合同
    async getScontractContractListFn() {
      let { code, data } = await getScontractContractListApi({
        contractTypeId: [this.$route.query.id],
      });
      if (code != 200) return;
      this.contractList = JSON.parse(JSON.stringify(data.rows));
    },
    handleClose() {},
    handleOpen() {},
    async activeLabel(constractItem) {
      // console.log(constractItem);
      let { code, data } = await getScontractGetInfoApi(constractItem.id);
      if (code != 200) return;
      this.contract = JSON.parse(JSON.stringify(data));
    },
  },
};
</script>

<style lang="scss" scoped>
.box-container {
  display: flex;
  .left {
    width: 200px;
  }
  .content-box {
    position: relative;
    padding: 20px;
    flex: 1;
    .content {
      .head .titile,
      .footer .titile,
      .details .titile {
        font-size: 23px;
        color: #e4e4e4;
        padding-bottom: 10px;
        border-bottom: 1px solid #f1f3f4;
      }
      .footer .titile {
        border-bottom: unset;
      }
      .head .head-item,
      .footer .footer-item,
      .details .details-item {
        margin: 20px 0px;
      }

      .head,
      .footer,
      .details {
        margin-top: 50px;
      }
    }
  }
}
.editTip-box {
  position: absolute;
  .editTip-item {
    display: inline-block;
    height: 50px;
    width: 50px;
    line-height: 50px;
    background-color: #e4e4e4;
    text-align: center;
    margin-left: 10px;
  }
}
</style>